<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The JQuery Ajax 01 Page</h1>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doAjaxPost()">$.post(...)</button>
    <button onclick="doAjaxGet()">$.get(...)</button>
    <button onclick="doAjaxLoad()">$("..").load(...)</button>
</div>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>
<script>
    //基于jQuery向服务端发送异步请求
    function doAjax(){
        let url="/doAjaxPost";
        let params="id=200&name=oppo&remark=nice";
        $.ajax({//这里的$为jQuery对象，ajax为jQuery中的ajax函数，内部封装了对XMLHttpRequest的应用
            type:"post",//默认为get
            url:url,
            data:params,
            success:function (result){//这个函数会在xhr.readState==4&xhr.status==200时执行
                $("#result").html(result);//result表示服务器端响应的结果
            }
        });
    }
    function doAjaxPost(){
        let url="/doAjaxPost";
        let params="id=200&name=oppo&remark=very nice";
        //post函数语法：post(url,params,[callback])
        //post函数是jQuery中ajax函数的一种演变形式，只能发post请求，下面同理
        $.post(url,params,function (result){
            $("#result").html(result);
        });
    }
    function doAjaxGet(){
        let url="/doAjaxGet";
        let params="";
        $.get(url,params,function (result){
            //服务端返回的字符串如果满足json格式，get函数会自动将这个json格式的字符串转换成js对象
            $("#result").html(result);//html函数只接收字符串,可以用JSON.stringify()函数转换一下
        },"text");//这里的text表示以什么形式处理服务端响应的数据
    }
    function doAjaxLoad(){
        let url="/doAjaxGet";
        //在指定位置异步加载url对应的资源
        //这里的load函数为ajax异步get请求函数
        //语法：load(url,[,params][,callback])
        $("#result").load(url,function (){//此函数会在异步加载完成以后执行
            console.log("load complete")
        });
    }
</script>
</body>
</html>